<template>
  <el-card shadow="always">
<!--   1. 添加学生-->
    <el-button type="primary" plain size="medium" @click="addStudent">添加学生</el-button>
<!--   2. 列表学生-->
    <el-table
            :data="students"
            style="width: 100%">
      <el-table-column
              label="学号"
              prop="sid"
              align="center"
              width="180" />
      <el-table-column
              label="姓名"
              prop="sname"
              align="center" />
      <el-table-column
              label="性别"
              prop="sex"
              align="center" />
      <el-table-column
              label="年龄"
              prop="age"
              align="center" />
      <el-table-column
              label="住址"
              prop="addr"
              align="center" />
      <el-table-column
              label="所在班级"
              prop="cid"
              align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--   3. 添加或修改学生-->
    <el-dialog :title="student.sid ? '修改学生' : '添加学生'" :visible.sync="dialogFormVisible">
      {{student}}
      <el-form :model="student">
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="student.sname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生性别" :label-width="formLabelWidth">
          <el-radio v-model="student.sex" label="男">男</el-radio>
          <el-radio v-model="student.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="学生年龄" :label-width="formLabelWidth">
          <el-input v-model="student.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生住址" :label-width="formLabelWidth">
          <el-input v-model="student.addr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在班级" :label-width="formLabelWidth">
          <el-select v-model="student.cid" placeholder="请选择所在班级">
            <el-option :label="c.cname" :value="c.cid" v-for="c in classes" :key="c.cid"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>

</template>

<script>
  export default {
    data() {
      return {
        students: [],             // 学生列表数据
        dialogFormVisible: false, //对话框的显示与隐藏
        formLabelWidth: '100px',  // 表单前的提示文本的宽度
        classes:[],               // 班级列表
        student:{},               // 要添加或修改的学生对象
      }
    },
    created() {
      //1. 查询学生列表
      this.findAllStudents()
      //2. 查询所有班级
      this.findAllClasses()
    },
    methods: {
      //1. 查询所有学生
      findAllStudents(){
        this.$axios.get("/student/list.do").then(({data}) => {
          this.students = data.data
        })
      },
      //2. 查询学生班级
      findAllClasses(){
        this.$axios.get("/classes/list.do").then(({data}) => {
          this.classes = data.data
        })
      },
      //3. 添加学生
      addStudent(){
        //3.1 清空关联的表单数据
        this.student = {}
        //3.2 打开对话框
        this.dialogFormVisible = true
      },
      //4. 修改学生
      handleEdit(index, row) {
        console.log(index, row);
        //4.1 为与表单关联的学生对象赋值
        this.student = row
        //4.2 打开对话框
        this.dialogFormVisible = true
      },
      //5. 保存学生
      save(){
        this.$axios.post(`/student/${this.student.sid ? 'update.do' : 'add.do'}`,this.student)
                .then(({data}) => {
          if(data.code == 200){
            const _this = this
            this.$message({
              message: data.msg,
              type: 'success',
              onClose(){
                //1. 关闭对话框
                _this.dialogFormVisible = false
                //2. 刷新页面
                _this.findAllStudents()
              }
            });
          }
        })
      },
      //6. 删除学生
      handleDelete(index, row) {
        console.log(index, row);
          const _this = this
          this.$confirm(`是否真的要删除学生'${row.sname}'吗?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {     // 点击了’确定‘按钮执行下面的代码
              this.$axios.get(`/student/delete.do?sid=${row.sid}`).then(({data}) => {
                if(data.code == 200){
                  this.$message({
                      type: 'success',
                      message: data.msg,
                      onClose(){
                        // 刷新页面
                        _this.findAllStudents()
                      }
                  });
                }
              })

          }).catch(() => {     // 点击了’取消‘按钮执行下面的代码
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });
          });
      }
    }
  }
</script>